<template>
    <div class="Perform">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="PerformS"></i>
            <span>完成工作</span>
            <i class="iconfont iconzuojiantou" style="color: rgba(0,0,0,0);"></i>
        </div>
        <div class="Perform-center">
            <p>
                <span>完成时间:</span>
                <span>{{timeS}}</span>
            </p>
            <p>
                <span>任务名称:</span>
                <span>{{taskName}}</span>
            </p>
            <div class="Perform-imge">
                <p class="Perform-imgeTite">任务完成照片:</p>
                <div class="imge">
                    <div class="imge-one">
                        <img src="../assets/invite/UPimge.png" alt="" class="imgeone" v-if="Ones">
                        <img :src="imgOneS" alt="" class="Uimgeone" v-else>
                        <input type="file" class="upFile" multiple accept="image/png,image/jpeg,image/jpg" @change="addImgOne">
                    </div>
                    <div class="imge-one">
                        <img src="../assets/invite/UPimge.png" alt="" class="imgeone" v-if="Twos">
                        <img :src="imgTwoS" alt="" class="Uimgeone" v-else >
                        <input type="file" class="upFile" multiple accept="image/png,image/jpeg,image/jpg" @change="addImgTwo">
                    </div>
                </div>
                <p class="imgeTite">只支持JPG格式</p>
            </div>
        </div>
        <div class="Perform-button">
            <button @click="submit">提交</button>
        </div>
    </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      timeS: new Date().toLocaleString(),
      taskName: this.$route.query.jobName,
      imgData: { accept: "image/gif, image/jpeg, image/png, image/jpg" },
      imgOneS: "",
      imgTwoS: ""
    };
  },
  mounted() {
    //监听浏览器返回事件
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }
  },
  destroyed() {
    // 销毁监听浏览器事件
    window.removeEventListener("popstate", this.goBack, false);
  },
  computed: {
    Ones() {
      return this.imgOneS == "" || this.imgOneS == undefined ? true : false;
    },
    Twos() {
      return this.imgTwoS == "" || this.imgTwoS == undefined ? true : false;
    }
  },
  created() {},
  methods: {
    PerformS() {
      if (!this.$route.query.url) {
        this.$router.push("/MyAssignment");
      } else {
        this.$router.push({
        path: "/MyAssignment",
        query: {
          userId: this.$route.query.userId,
          id:this.$route.query.id
        }
      });
      }
    },
    goBack() {
      this.$router.push("/MyAssignment");
    },
    addImgOne(event) {
      let reader = new FileReader();
      let img1 = event.target.files[0];
      let type = img1.type; //文件的类型，判断是否是图片
      let size = img1.size; //文件的大小，判断图片的大小
      if (this.imgData.accept.indexOf(type) == -1) {
        alert("请选择我们支持的图片格式！");
        return false;
      }
      //图片的大小
      if (size > 52428800) {
        alert("请选择5M以内的图片！");
        return false;
      }
      let formOne = new FormData();
      formOne.append("file", img1, img1.name);
      console.log("formOne", formOne);
      this.upFile(formOne, 0);
    },
    addImgTwo(event) {
      let reader = new FileReader();
      let img1 = event.target.files[0];
      let type = img1.type; //文件的类型，判断是否是图片
      let size = img1.size; //文件的大小，判断图片的大小
      if (this.imgData.accept.indexOf(type) == -1) {
        alert("请选择我们支持的图片格式！");
        return false;
      }
      //图片的大小
      if (size > 52428800) {
        alert("请选择3M以内的图片！");
        return false;
      }
      let formTwo = new FormData();
      formTwo.append("file", img1, img1.name);
      this.upFile(formTwo, 1);
    },
    upFile(form, index) {
      console.log("form", form);
      this.$axios.post("/cct/qny/uploading", form).then(res => {
        console.log("++++++++++++", res);
        if (res.status == 200) {
          // let url = window.domain
          if (index == 0) {
            this.imgOneS = res.data.data;
          }
          if (index == 1) {
            this.imgTwoS = res.data.data;
          }
        }
      });
    },
    //提交按钮
    submit() {
      console.log(this.imgOneS, this.imgTwoS);
      this.$axios
        .post("/cct/audit/addAudit", {
          jobName: this.taskName,
          agencyId: this.$route.query.agencyId,
          userId: this.$route.query.userId,
          jobId: this.$route.query.jobId,
          picture1:this.imgOneS,
          picture2:this.imgTwoS,
        })
        .then(res => {
          console.log("完成任务", res.data.code);
          if (0 == res.data.code) {
            Toast("任务已提交审核");
            this.$router.push("/MyAssignment");
          } else {
            Toast("已经在审核了~");
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
.Perform {
  width: 100%;
  height: 100vh;
  font-size: 0;
  .title {
    width: 100%;
    font-size: 0.36rem;
    color: #333333;
    height: 1.25rem;
    line-height: 1.25rem;
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
    box-sizing: border-box;
    background: #ffffff;
  }
  .Perform-center {
    width: 100%;
    height: 5.14rem;
    margin-top: 0.1rem;
    background: #ffffff;
    p > {
      &:nth-child(1) {
        width: 100%;
        height: 0.8rem;
        padding: 0rem 0.33rem;
        line-height: 0.8rem;
        border-bottom: 0.01rem solid #f8f8f8;
        span {
          &:nth-child(1) {
            font-size: 0.26rem;
            color: #333333;
            font-family: "PingFang-SC-Medium";
            font-weight: 520;
          }
          &:nth-child(2) {
            font-size: 0.26rem;
            color: #666666;
            font-family: "PingFang-SC-Medium";
            margin-left: 0.2rem;
          }
        }
      }
      &:nth-child(2) {
        width: 100%;
        height: 0.8rem;
        padding: 0rem 0.33rem;
        line-height: 0.8rem;
        border-bottom: 0.01rem solid #f8f8f8;
        display: flex;
        span {
          &:nth-child(1) {
            display: block;
            font-size: 0.26rem;
            color: #333333;
            font-family: "PingFang-SC-Medium";
            font-weight: 520;
          }
          &:nth-child(2) {
            display: block;
            width: 80%;
            height: 0.8rem;
            font-size: 0.26rem;
            color: #666666;
            font-family: "PingFang-SC-Medium";
            margin-left: 0.2rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    .Perform-imge {
      width: 100%;
      height: 3.54rem;
      .Perform-imgeTite {
        width: 100%;
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.26rem;
        color: #333333;
        font-family: "PingFang-SC-Medium";
        font-weight: 520;
        border-bottom: 0.01rem solid rgba(0, 0, 0, 0);
        padding: 0rem 0.33rem;
      }
      .imgeTite {
        width: 100%;
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.24rem;
        color: #999999;
        font-family: "PingFang-SC-Medium";
        font-weight: 520;
        border-bottom: 0.01rem solid rgba(0, 0, 0, 0);
        padding: 0rem 0.33rem;
      }
      .imge {
        width: 100%;
        height: 1.96rem;
        display: flex;
        .imge-one {
          width: 2rem;
          height: 2rem;
          background: #f8f8f8;
          position: relative;
          line-height: 2rem;
          text-align: center;
          margin-left: 0.33rem;
          .imgeone {
            width: 0.8rem;
            height: 0.8rem;
          }
          .Uimgeone {
            width: 2rem;
            height: 2rem;
          }
        }
        .upFile {
          width: 2rem;
          height: 2rem;
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
  }
  .Perform-button {
    button {
      font-size: 0.36rem;
      color: #ffffff;
      background-color: #38a83f;
      width: 5.9rem;
      height: 0.8rem;
      border-radius: 0.4rem;
      margin: 3rem 0.8rem 0rem 0.8rem;
    }
  }
}
</style>

